<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>订单物流详情</title>
  <link rel="stylesheet" href="src/css/iview.css">
  <link rel="stylesheet" href="src/css/vue-style.css">
  <style>
    [v-cloak]{
      display: none;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <div class="vue-wrapper">
      <div class="order-detail_anchor">
        <Anchor :affix="false" show-ink>
          <anchor-link href="#detail1" title="订单信息"></anchor-link>
          <anchor-link href="#detail2" title="商品明细"></anchor-link>
          <anchor-link href="#detail3" title="物流服务要求"></anchor-link>
          <anchor-link href="#detail4" title="温控设备监控"></anchor-link>
          <anchor-link href="#detail5" title="温度记录、温度明细"></anchor-link>
          <anchor-link href="#detail6" title="物流详情"></anchor-link>
          <anchor-link href="#detail7" title="车辆在途轨迹"></anchor-link>
          <anchor-link href="#detail8" title="转运单号"></anchor-link>
          <anchor-link href="#detail9" title="签收详情"></anchor-link>
          <anchor-link href="#detail10" title="回单状态"></anchor-link>
        </Anchor>
      </div>
      <Collapse simple v-model="foldingPanel" class="order-detail">
        <!-- 订单信息 -->
        <Panel name="1" id="detail1">
          <h2 class="ivu-icon ivu-icon-ios-book">订单信息</h2>
          <div slot="content">
            <div class="logistics-info">
              <div class="min-title">
                <b>原单信息</b>
              </div>
              <Row class="order-detail_row">
                <i-col :md="12" :lg="8"><em>物流单号：</em><span>{{ info.TPLPoNo }}</span></i-col>
                <i-col :md="12" :lg="8"><em>业务单号：</em><span>{{ info.BBillNo }}</span></i-col>
                <i-col :md="12" :lg="8" v-if="info.MainDeliveryNo"><em>主提货单号：</em><span>{{ info.MainDeliveryNo }}</span></i-col>
                <i-col :md="12" :lg="8" v-if="info.BeginningCity"><em>始发城市：</em><span>{{ info.BeginningCity }}</span></i-col>
                <i-col :md="12" :lg="8" v-if="info.DestinationCity"><em>目的城市：</em><span>{{ info.DestinationCity}}</span></i-col>
              </Row>
              <div class="min-title">
                <b>发货方</b><span>已保存到常用联系人</span>
              </div>
              <Row class="order-detail_row">
                <i-col :md="12" :lg="8"><em>发货人：</em><span>{{ Consignor.CargoOwner }}</span></i-col>
                <i-col :md="12" :lg="8"><em>所在地：</em><span>{{ Consignor.Location }}</span></i-col>
                <i-col :md="12" :lg="8"><em>发货联系人：</em><span>{{ Consignor.Name }}</span></i-col>
                <i-col :md="12" :lg="8"><em>发货单位：</em><span>{{ Consignor.CorporationName }}</span></i-col>
                <i-col :md="12" :lg="8"><em>联系电话：</em><span>{{ Consignor.Contact1 }}</span></i-col>
                <i-col :md="12" :lg="8"><em>要求到达时间：</em><span>{{ Consignor.ArrivalTime }}</span></i-col>
                <i-col :md="8" :lg="8" v-if="Consignor.TimeLimit"><em>时限(0为不限)：</em><span>{{ Consignor.TimeLimit }}</span>天</i-col>
                <i-col :md="16" :lg="16"><em>详细地址：</em><span>{{ Consignor.Address }}</span></i-col>
              </Row>
              <div class="min-title">
                <b>收货方</b><span>未保存到常用联系人</span>
              </div>
              <Row class="order-detail_row">
                <i-col :md="8" :lg="8"><em>收货人：</em><span>{{ Consignee.Receiver }}</span></i-col>
                <i-col :md="8" :lg="8" v-if="Consignee.Network"><em>网点：</em><span>{{ Consignee.Network }}</span></i-col>
                <i-col :md="8" :lg="8"><em>收货单位：</em><span>{{ Consignee.CorporationName }}</span></i-col>
                <i-col :md="8" :lg="8"><em>联系电话：</em><span>{{ Consignee.Contact1 }}</span></i-col>
                <i-col :md="16" :lg="8"><em>所在地：</em><span>{{ Consignee.Location }}</span></i-col>
                <i-col :md="16" :lg="16"><em>详细地址：</em><span>{{ Consignee.Address }}</span></i-col>
                <i-col :md="8" :lg="8" v-if="Consignee.areaPick"><em>区域指定：</em><span>{{ Consignee.areaPick }}</span></i-col>
              </Row>
            </div>
          </div>
        </Panel>
        <!-- 商品明细 -->
        <Panel name="2" id="detail2">
          <h2 class="ivu-icon ivu-icon-ios-book">商品明细</h2>
          <div slot="content">
            <i-table :columns="tableColumn1" :data="tableData1" ref="refTable1" stripe></i-table>
            <div class="pro-count">
              <Row>
                <i-col :md="6" :lg="4">
                  总件数<b>{{ total.number }}</b><span>件</span>
                </i-col>
                <i-col :md="6" :lg="4">
                  总重量<b>{{ total.weight }}</b><span>公斤</span>
                </i-col>
                <i-col :md="6" :lg="4">
                  总体积<b>{{ total.volume }}</b><span>立方米</span>
                </i-col>
              </Row>
            </div>
            <div class="min-title">
              <b>财务信息</b>
            </div>
            <Row class="order-detail_row">
              <i-col :md="8" :lg="5"><em>物流类型：</em><span>{{ Finance.SettleType }}</span></i-col>
              <i-col :md="8" :lg="5" v-if="Finance.CarrierAmount"><em>运输费：</em><span>{{ Finance.CarrierAmount }}</span></i-col>
              <i-col :md="8" :lg="5"><em>付款方式：</em><span>{{ Finance.PayWay }}</span></i-col>
              <i-col :md="8" :lg="5"><em>计费方式：</em><span>{{ Finance.BillingMethod }}</span></i-col>
              <i-col :md="8" :lg="4"><em>代收货款：</em><span>{{ Finance.CollectionAmount }}</span>元</i-col>
            </Row>
          </div>
        </Panel>
        <!-- 物流服务要求 -->
        <Panel name="3" id="detail3">
          <h2 class="ivu-icon ivu-icon-ios-book">物流服务要求</h2>
          <div slot="content">
            <div class="logistics-info">
              <Row :gutter="8" class="order-detail_row">
                <i-col :md="6" :lg="6" v-if="info.CollectionTime"><em>上门提货时间：</em><span>{{ Requirements.CollectionTime }}</span></i-col>  <!-- 上门提货 -->
                <i-col :md="6" :lg="6" v-if="Requirements.DeliveredToDoor"><em>是否送货上门：</em><span>{{ Requirements.DeliveredToDoor }}</span></i-col>  <!-- 送货上门 -->
                <i-col :md="6" :lg="6" v-if="Requirements.OriginalSign"><em>是否原件签收：</em><span>{{ Requirements.OriginalSign }}</span></i-col>  <!-- 原件签收 -->
                <i-col :md="6" :lg="6"><em>温度要求：</em><span>{{ Requirements.IsCCBB == 'N' ? '常温' : Requirements.IsCCBB == 'Y' ? '冷藏' : '冷冻' }}</span></i-col>
                <i-col :md="6" :lg="6"><em>配送方式：</em><span>{{ Requirements.IsCollection == 'Y' ? '平台配送' : '自提' }}</span></i-col>
                <i-col :md="6" :lg="6"><em>货物外形：</em><span>{{ Requirements.Shape == '1' ? '普通' : '特殊' }}</span></i-col>
                <i-col :md="6" :lg="6" v-if="Requirements.IsCCBB != 'N'"><em>是否冷链运输：</em><span>{{ Requirements.IsCCBB == 'N' ? '' : '是' }}</span></i-col>  <!-- 冷链运输 -->
                <i-col :md="6" :lg="6" v-if="Requirements.PropertyCtrlFlag"><em>是否物控：</em><span>{{ Requirements.PropertyCtrlFlag }}</span></i-col>  <!-- 物控 -->
                <i-col :md="12" :lg="6" v-if="Requirements.NotMixedGoods"><em>是否与其他货物混放：</em><span>{{ Requirements.NotMixedGoods }}</span></i-col>  <!-- 不与其他货物混放 -->
                <i-col :md="6" :lg="6" v-if="Requirements.NotMixedGoods"><em>是否专人押运：</em><span>{{ Requirements.SpecialEscort }}</span></i-col>  <!-- 专人押运 -->
                <i-col :md="6" :lg="6" v-if="Requirements.ReturnBillFlag"><em>是否返单：</em><span>{{ Requirements.ReturnBillFlag }}</span></i-col>  <!-- 是否返单 -->
                <i-col :md="12" :lg="12" v-if="Requirements.Carriers"><em>指定承运商：</em><span>{{ Requirements.Carriers }}</span></i-col>
                <i-col :md="6" :lg="6" v-if="Requirements.WaitShippingArea"><em>待发区：</em><span>{{ Requirements.WaitShippingArea }}</span></i-col>
                <i-col :md="6" :lg="6" v-if="Requirements.Premium"><em>保价费：</em><span>{{ Requirements.Premium }}</span>元</i-col>
              </Row>
            </div>
          </div>
        </Panel>
        <!-- 温控设备监控 -->
        <Panel name="4" id="detail4">
          <h2 class="ivu-icon ivu-icon-ios-book">温控设备监控</h2>
          <div slot="content">
            <i-table :columns="tableColumn2" :data="tableData2" ref="refTable2" stripe highlight-row></i-table>
          </div>
        </Panel>
        <!-- 温度记录 | 温度明细 -->
        <Panel name="5" id="detail5">
          <h2 class="ivu-icon ivu-icon-ios-book">温度记录 | 温度明细</h2>
          <div slot="content">
            <div style="height: 300px; width: 100%;" ref="lineWidth">
              <div id="lineChart" style="height: 100%;"></div>
            </div>
          </div>
        </Panel>
        <!-- 物流详情 -->
        <Panel name="6" id="detail6">
          <h2 class="ivu-icon ivu-icon-ios-book">物流详情</h2>
          <div slot="content">
            <div class="logistics-process">
              <dl>
                <dt class="logistics-process_icon passed">
                  <p>
                    <span>
                      <i class="ivu-icon ivu-icon-md-person"></i>
                    </span>
                  </p>
                </dt>
                <dd class="logistics-process_title">
                  <h3>货主</h3>
                  <p>{{ process.CargoOwnerName }}</p>
                </dd>
              </dl>
              <dl>
                <dt class="logistics-process_icon passed">
                  <p>
                    <span>
                      <i class="ivu-icon ivu-icon-md-person"></i>
                    </span>
                  </p>
                </dt>
                <dd class="logistics-process_title">
                  <h3>会员</h3>
                  <p>{{ process.member }}</p>
                </dd>
              </dl>
              <dl>
                <dt class="logistics-process_icon current">
                  <p>
                    <span>
                      <i class="ivu-icon ivu-icon-md-person"></i>
                    </span>
                  </p>
                </dt>
                <dd class="logistics-process_title">
                  <h3>承运商</h3>
                  <p>{{ process.carrier }}</p>
                </dd>
              </dl>
              <dl>
                <dt class="logistics-process_icon">
                  <p>
                    <span>
                      <i class="ivu-icon ivu-icon-md-person"></i>
                    </span>
                  </p>
                </dt>
                <dd class="logistics-process_title">
                  <h3>承运商</h3>
                  <p>{{ process.carrier2 }}</p>
                </dd>
              </dl>
              <dl>
                <dt class="logistics-process_icon">
                  <p>
                    <span>
                      <i class="ivu-icon ivu-icon-md-person"></i>
                    </span>
                  </p>
                </dt>
                <dd class="logistics-process_title">
                  <h3>网点</h3>
                  <p>{{ process.network }}</p>
                </dd>
              </dl>
              <dl>
                <dt class="logistics-process_icon">
                  <p>
                    <span>
                      <i class="ivu-icon ivu-icon-md-person"></i>
                    </span>
                  </p>
                </dt>
                <dd class="logistics-process_title">
                  <h3>收货方</h3>
                  <p>{{ process.receipt }} </p>
                </dd>
              </dl>
            </div>
            <ul class="logistics-process-detail">
              <detail-text :details="details"></detail-text>
              <li></li>
            </ul>
          </div>
        </Panel>
        <!-- 车辆在途轨迹 -->
        <Panel name="7" id="detail7">
          <h2 class="ivu-icon ivu-icon-ios-book">车辆在途轨迹</h2>
          <div slot="content">
            <div class="map-wrapper" ref="mapResize" :class="showMaxMap">
              <div id="mapContainer" class="map-container"></div>
              <i class="ivu-icon ivu-icon-md-resize" @click="mapZoom()"></i>
            </div>
          </div>
        </Panel>
        <!-- 转运单号 -->
        <Panel name="8" id="detail8">
          <h2 class="ivu-icon ivu-icon-ios-book">转运单号</h2>
          <div slot="content">
            <div class="btn-table-title">
              <button class="ivu-icon ivu-icon-md-add" @click="addTr()">新增快递单号</button>
              <button class="ivu-icon ivu-icon-md-paper" @click="saveData3()">确认保存</button>
            </div>
            <table class="table-vue">
              <thead>
                <tr>
                  <th>序号</th>
                  <th>快递单号</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in tableData3">
                  <td>{{ index+1 }}</td>
                  <td>
                    <input type="text" v-model="item.TrackingNo" placeholder="请输入物流单号">
                  </td>
                  <td>
                    <button class="del" @click="removeTr(index)">删除</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </Panel>
        <!-- 签收详情 -->
        <Panel name="9" id="detail9">
          <h2 class="ivu-icon ivu-icon-ios-book">签收详情</h2>
          <div slot="content">
            <i-table :columns="tableColumn4" :data="tableData4" ref="refTable4" stripe></i-table>
          </div>
        </Panel>
        <!-- 回单状态 -->
        <Panel name="10" id="detail10">
          <h2 class="ivu-icon ivu-icon-ios-book">回单状态</h2>
          <div slot="content">
            <i-table :columns="tableColumn5" :data="tableData5" ref="refTable5" stripe></i-table>
          </div>
        </Panel>
      </Collapse>
    </div>
    <!-- 查看图片 -->
    <Modal v-model="imgModal" class="img-modal" width="800">
      <p slot="header"></p>
      <div style="text-align:center">
        <Carousel v-model="value3" :autoplay="setting.autoplay" :autoplay-speed="setting.autoplaySpeed" :dots="setting.dots"
          :radius-dot="setting.radiusDot" :trigger="setting.trigger" :arrow="setting.arrow" ref="carouse">
          <carousel-item v-for="item in detailsImg">
            <div class="demo-carousel">
              <img :src="item.imgPath" alt="">
            </div>
          </carousel-item>
        </Carousel>
      </div>
      <div slot="footer"></div>
    </Modal>
  </div>

  <script src="src/js/vue.js"></script>
  <script src="src/js/axios.min.js"></script>
  <script src="src/js/iview.min.js"></script>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0IwGx8cSwb2kbtt0Pu42yu974w3mQrmh"></script>
  <script src="src/js/echarts.js"></script>
  <script>
    Vue.component('detail-text', {
      props: ['details'],
      methods: {
        handleShow() {
          appLayout.imgModal = true,
            appLayout.$nextTick(() => {
              appLayout.$refs.carouse.handleResize()
            })
        }
      },
      template: '<ul>\
        <li v-for="item in details">\
          <span>{{ item.time }}</span>\
          <p>{{ item.text }} <a class="ivu-icon ivu-icon-md-images" @click="handleShow" v-if="item.imgShow">{{ item.imgShow }}</a></p>\
          <i></i>\
        </li>\
      </ul>'
    })
    var appLayout = new Vue({
      el: '#app',
      data: {
        foldingPanel: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
        info: {
          TPLPoNo: 'WL201811301440292295',
          BBillNo: 'KB11390018',
          MainDeliveryNo: '',
          BeginningCity: '湖北省/宜昌市/伍家岗区',
          DestinationCity: '湖北省/武汉市/江岸区'
        },
        Consignor: {
          CargoOwner: '康迪货主有限公司',
          Location: '北京市/北京市',
          Name: '天士力',
          CorporationName: '天士力制药集团',
          Contact1: '18011111133',
          ArrivalTime: '2018-08-07 21:20',
          TimeLimit: '3',
          Address: '海淀区马连洼兰园小区14号楼1层',
        },
        Consignee: {
          Receiver: '楚天',
          Network: '吉阳区吉阳办',
          CorporationName: '天弘济生大药房',
          Contact1: '18011111144',
          Location: '海南省/三亚市',
          Address: '吉阳区吉阳大道188号',
          areaPick: ''
        },
        tableColumn1: [{
          type: "index",
          title: "序号",
          width: 50,
          align: "center"
        }, {
          title: "商品编码",
          key: "GoodsCode",
          width: 100,
          align: "center"
        }, {
          title: "商品名称",
          key: "GoodsName",
          align: "center"
        }, {
          title: "规格",
          key: "GoodsSpec",
          width: 100,
          align: "center"
        }, {
          title: "包装单位",
          key: "Unit",
          width: 100,
          align: "center"
        }, {
          title: "批准文号",
          key: "RegistKey",
          align: "center"
        }, {
          title: "生产厂商",
          key: "Producer",
          align: "center"
        }, {
          title: "批号",
          key: "Lot",
          width: 100,
          align: "center"
        }, {
          title: "件数",
          key: "PCKS",
          width: 100,
          align: "center"
        }, {
          title: "重量(kg)",
          key: "Weight",
          width: 100,
          align: "center"
        }, {
          title: "体积(m³)",
          key: "Volume",
          width: 100,
          align: "center"
        }, {
          title: "生产日期",
          key: "ProductionDate",
          width: 100,
          align: "center"
        }, {
          title: "有效期至",
          key: "ExpireDate",
          width: 100,
          align: "center"
        }],
        tableData1: [],
        total: {
          number: 20,
          weight: 30,
          volume: 50
        },
        Finance: {
          SettleType: '合同物流订单',
          CarrierAmount: '300',
          PayWay: '月结',
          BillingMethod: '重量计费',
          CollectionAmount: 555
        },
        Requirements: {
          CollectionTime: '',
          DeliveredToDoor: '是',
          OriginalSign: '否',
          IsCCBB: 'Y',
          IsCollection: 'Y',
          Shape: '1',
          PropertyCtrlFlag: '否',
          NotMixedGoods: '是',
          SpecialEscort: '是',
          ReturnBillFlag: '否',
          Carriers: '京东物流有限公司',
          WaitShippingArea: 'A区',
          Premium: '273'
        },
        tableColumn2: [{
          type: "index",
          title: "序号",
          align: "center"
        }, {
          title: "设备编号",
          key: "EqpCode",
          align: "center"
        }, {
          title: "设备状态",
          key: "EqpState",
          align: "center"
        }, {
          title: "设备电量",
          key: "EqpElectricity",
          align: "center"
        }, {
          title: "当前温度",
          key: "CurrentTemperature",
          align: "center"
        }, {
          title: "当前位置",
          key: "CurrentPosition",
          align: "center"
        }],
        tableData2: [],
        lineChartWidth: 0,
        process: {
          CargoOwnerName: '搏力谋（武汉）阀门有限公司',
          member: '武汉链享医药供应链管理有限公司',
          carrier: '上海佳吉物流股份有限公司',
          carrier2: '上海佳吉物流股份有限公司（沈阳分公司）',
          network: '沈阳沈北路办',
          receipt: '沈阳铭德无双科技有限公司'
        },
        details: [{
          time: '2018/09/21 19:12:40',
          text: '货物已完成配送！签收人：前台，签收件数：100件。电子回单：单据数，',
          imgShow: '点击可查看'
        }, {
          time: '18:15:00',
          text: '货物已由【沈阳沈北路办】交接确认，请您准备收货。'
        }, {
          time: '16:12:40',
          text: '货物已与【沈阳沈北路办】进行中转交接，交接人：王东杰，交接件数：100件'
        }, {
          time: '16:12:40',
          text: '货物已完成提货交接，交接件数：100件，发往【上海佳吉物流股份有限公司（沈阳分公司）】，单据：本次提货上传的物流单据照片数量',
          imgShow: '点击可查看'
        }, {
          time: '18:15:00',
          text: '货物已由【沈阳沈北路办】交接确认，请您准备收货。'
        }, {
          time: '2018/09/20 12:12:20',
          text: '司机已受理，司机：李四，电话：13972309311，车牌：鄂A789123'
        }, {
          time: '11:12:20',
          text: '已排车'
        }, {
          time: '10:12:20',
          text: '配送派单受理'
        }, {
          time: '09:12:20',
          text: '货物已与【上海佳吉物流股份有限公司】进行中转交接，交接人：严明，交接件数：100件'
        }, {
          time: '2018/09/19 20:12:30',
          text: '货物已完成提货交接，交接件数：100件，发往【上海佳吉物流股份有限公司】，单据：本次提货上传的物流单据照片数量',
          imgShow: '点击可查看'
        }, {
          time: '18:42:30',
          text: '司机已受理，司机：李四，电话：13972309311，车牌：鄂A789123',
          imgShow: '点击可查看'
        }, {
          time: '16:12:30',
          text: '已排车'
        }, {
          time: '2018/09/18 16:12:30',
          text: '配送派单受理'
        }, {
          time: '15:12:30',
          text: '物流派单确认'
        }, {
          time: '14:22:30',
          text: '物流派单中'
        }, {
          time: '12:12:30',
          text: '物流集单中'
        }, {
          time: '10:12:30',
          text: '运营接单'
        }, {
          time: '08:15:30',
          text: '提交'
        }, {
          time: '08:12:20',
          text: '初始'
        }],
        imgModal: false,
        value3: 0,
        setting: {
          autoplay: false,
          autoplaySpeed: 2000,
          dots: 'none',
          radiusDot: false,
          trigger: 'click',
          arrow: 'always'
        },
        detailsImg: [{
          imgPath: 'src/images/order.png'
        }, {
          imgPath: 'src/images/order2.png'
        }],
        showMaxMap: '',
        tableData3: [],
        tableColumn4: [{
          title: "签收时间",
          key: "ReceiveTime",
          align: "center"
        }, {
          title: "签收人",
          key: "Receiver",
          align: "center"
        }, {
          title: "签收状态",
          key: "ReceiveStatus",
          align: "center"
        }, {
          title: "异常原因",
          key: "ExpReason",
          align: "center"
        }],
        tableData4: [],
        tableColumn5: [{
          title: "回单状态",
          key: "BackBillStatus",
          align: "center"
        }, {
          title: "回单查看",
          key: "BackBillView",
          align: "center",
          render: (h, params) => {
            return h('Button', {
              on: {
                click: () => {
                  appLayout.$Message.warning('此处点击弹出模态框');
                }
              }
            }, "查看")
          }
        }, {
          title: "回单上传时间",
          key: "BackBillReportTime",
          align: "center"
        }, {
          title: "返单时间",
          key: "ReturnBillTime",
          align: "center"
        }],
        tableData5: [],
      },
      mounted() {
        this.getTableData1();
        this.getTableData2();
        this.getTableData5();

        let self = this;
        let lineW = this.$refs.lineWidth.clientWidth;
        this.lineChartWidth = lineW;
        this.$nextTick(function () {
          self.drawLine();
        })

        // 百度地图API功能
        var map = new BMap.Map("mapContainer"); // 创建地图实例  
        var point = new BMap.Point(116.404, 39.915); // 创建点坐标  
        map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别  
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

        let startPoint = new BMap.Point(116.301934, 39.977552);
        let endPoint = new BMap.Point(114.279966, 30.606673);
        // 小车图片
        let myIcon = new BMap.Icon("src/images/map-car.png", new BMap.Size(32, 32), {
          // offset: new BMap.Size(0, -5),  // 相当于CSS精灵
          imageOffset: new BMap.Size(0, 0) // 图片的偏移量，为了是图片底部中心对准坐标点
        });

        var driving2 = new BMap.DrivingRoute(map, {
          renderOptions: {
            map: map,
            autoViewport: true
          }
        });
        driving2.search(startPoint, endPoint); // 显示一条公交线路

        window.run = function () {
          var driving = new BMap.DrivingRoute(map);
          driving.search(startPoint, endPoint);
          driving.setSearchCompleteCallback(function () {
            var pts = driving.getResults().getPlan(0).getRoute(0).getPath();
            var paths = pts.length;
            var carMk = new BMap.Marker(pts[0], {
              icon: myIcon
            });
            map.addOverlay(carMk);
            i = 0;

            function resetMkPoint(i) {
              carMk.setPosition(pts[i]);
              if (i < paths) {
                setTimeout(function () {
                  i++;
                  resetMkPoint(i);
                }, 100);
              }
            }
            setTimeout(function () {
              resetMkPoint(5);
            }, 100)
          })
        }

        setTimeout(function () {
          run();
        }, 150)
      },
      methods: {
        // jump (index) {
        //   this.current = index;
        // },
        getTableData1() {
          axios.get('static/orderDetail.json').then(res => {
            this.tableData1 = res.data.Datas;
          })
        },
        getTableData2() {
          axios.get('static/orderDetail.json').then(res => {
            this.tableData2 = res.data.Datas;
            (this.tableData2[0] || [])._highlight = true;
          })
        },
        getTableData5() {
          axios.get('static/orderDetail.json').then(res => {
            this.tableData5 = res.data.Datas;
          })
        },
        // 温度记录/温度明细
        drawLine() {
          var ymax = 35;
          var ymin = -5;

          let myChart = echarts.init(document.getElementById('lineChart'))
          myChart.setOption({
            grid: {
              top: '37',
              left: '1%',
              right: '1%',
              bottom: '50',
              containLabel: true
            },
            dataZoom: [{
              type: 'inside',
              start: 0,
              end: 100
            }, {
              start: 0,
              end: 10,
              handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
              handleSize: '100%',
              handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
              }
            }],
            xAxis: [{
              type: 'category',
              data: ['10-19 16:22', '10-19 16:27', '10-19 16:32', '10-19 16:27', '10-19 16:42',
                '10-19 16:47', '10-19 16:52', '10-19 16:57', '10-19 17:02', '10-19 17:07', '10-19 17:12',
                '10-19 17:17', '10-19 17:22', '10-19 17:27'
              ],
              boundaryGap: false, //坐标轴两边留白
              splitLine: {
                show: false,
                lineStyle: {
                  color: ['#D4DFF5']
                }
              },
              axisTick: {
                show: true
              },
              axisLine: {
                lineStyle: {
                  color: '#333'
                }
              },
            }, ],
            yAxis: [{
              name: '℃',
              type: 'value',
              max: ymax,
              min: ymin,
              interval: 5,
              axisLabel: {
                textStyle: {
                  color: '#333',
                  fontStyle: 'normal',
                }
              }
            }],
            series: [{
              name: '温度记录',
              type: 'line',
              smooth: true,
              showSymbol: true,
              //symbol: 'circle',
              symbolSize: 10,
              markPoint: {
                data: [{
                    type: 'max',
                    name: '最大值'
                  },
                  {
                    type: 'min',
                    name: '最小值'
                  }
                ]
              },
              data: ['23.8', '23.9', '22.7', '23.8', '24', '22.9', '23', '23.5', '23.9', '24', '23.7',
                '23.4', '23.1', '23'
              ],
              itemStyle: {
                normal: {
                  color: '#229aff'
                }
              },
              lineStyle: {
                normal: {
                  width: 4
                }
              }
            }]
          });
        },

        // 百度地图
        mapZoom() {
          let osTop = document.body.offsetHeight;

          if (this.showMaxMap) {
            this.showMaxMap = '';
            this.$nextTick(function () {
              window.scrollTo(0, osTop);
            });
          } else {
            this.showMaxMap = 'maxMap';
            window.scrollTo({
              top: 0
            });
          }
        },

        // 新增快递单号
        addTr() {
          this.tableData3.push({
            TrackingNo: ""
          })
        },
        removeTr(index) {
          this.tableData3.splice(index, 1);
        },
        saveData3() {
          let self = this;
          if (self.tableData3.length == 0) {
            self.$Message.warning('请至少维护一条外箱条码号!');
          }
          self.tableData3.forEach(function (item) {
            if (item.TrackingNo == "") {
              self.$Message.warning('请至少维护一条外箱条码号!');
            }
          })
        }
      }
    })
  </script>
</body>

</html>